<template>
	<div style="width: 150%">
		<h3 class="pageTitle">教师排课表管理 </span></h3>
		<hr class="pageTitle" />
		<h4 class="pageTitle">筛选条件 <span class="label label-default">学期</span></h4>
		<div>
			<!-- 加粗 -->
			<b class="condition">学期:</b>
			<select class="option">
				<option>全部</option>
				<option>第一学期</option>
				<option>第二学期</option>
			</select>
			<b class="condition">教学周:</b>
			<select class="option">
				<option>全部</option>
				<option>7</option>
				<option>13</option>
			</select>
			<b class="condition">周几:</b>
			<select class="option">
				<option>全部</option>
				<option>一</option>
				<option>二</option>
			</select>
			<b class="condition">节次:</b>
			<select class="option">
				<option>全部</option>
				<option>1</option>
				<option>5</option>
			</select>
			<b>搜索:</b>
			<input type="text" class="search" style="width: 120px;" placeholder="请输入课程名称">
			<button type="button" class="btn btn-default">筛选</button>
		</div>
		<hr class="pageTitle" />
		<button type="button" class="btn btn-default pageTitle courseinfo">导入排课数据</button>
		<span class="rightCondition">
			<img src="../../public/img/cloudup.png" />
			<img src="../../public/img/condition.png" style="width: 20px;height: 20px;" />
		</span>
		<br /><br />
		<table class="table table-condensed pageTitle">
			<thead>
				<tr>
					<th>序号</th>
					<th>课程编号</th>
					<th>课程名称</th>
					<th>总学时</th>
					<th>学分</th>
					<th>所属院系</th>
					<th>教师姓名</th>
					<th>联系方式</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(item,index) in list" :key="index">
					<td>
						<label>
							<input type="checkbox">{{index + 1}}
						</label>
					</td>
					<td>{{item.courseno}}</td>
					<td>{{item.coursename}}</td>
					<td>{{item.totalperiod}}</td>
					<td>{{item.credit}}</td>
					<td>{{item.faculty}}</td>
					<td>{{item.name}}</td>
					<td>{{item.phone}}</td>
					<td>
						<a style="cursor: pointer;" @click="exitCourse(item.userid,item.id)">退选</a>
					</td>
				</tr>
			</tbody>
		</table>
		<div class="pageTitle">
			<label>
				<input type="checkbox">全选
				<a>批量删除</a>
			</label>
			<span class="page">
				共:<i>100</i>条
				<select class="option">
					<option>10条/页</option>
					<option>20条/页</option>
				</select>
				<ul class="pagination pagination-sm page">
					<li><a href="#">&laquo;</a></li>
					<li><a href="#">1</a></li>
					<li><a href="#">2</a></li>
					<li><a href="#">3</a></li>
					<li><a href="#">4</a></li>
					<li><a href="#">5</a></li>
					<li><a href="#">&raquo;</a></li>
				</ul>
				跳转到:<input type="text" style="width: 20px;" /> &nbsp;页 &nbsp;
				<input type="button" value="确定" />
			</span>
		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		name: 'TeacherCourse',
		data() {
			return {
				list:''
			}
		},
		methods:{
			exitCourse(u,c){
				axios({
					//请求地址
					url: 'http://localhost:8080/axios/deleteStudentByAd',
					//请求方式
					method: 'post',
					params:{
						courseid:c,
						userid:u
					}
				}).then(
					res => {
						alert("操作成功")
						this.loading()
					},
					err => {
						console.log(err.message)
					}
				)
			},
			loading(){
				axios({
					//请求地址
					url: 'http://localhost:8080/axios/selectTC.do',
					//请求方式
					method: 'post',
				}).then(
					res => {
						//登录成功
						this.list = res.data.resp
					},
					err => {
						console.log(err.message)
					}
				)
			}
		},
		created() {
			this.loading()
		}
	}
</script>
